<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
            佣金操作记录
          </div>
                 <div class="hei10"></div>


        <div class="o_ul">
          <router-link class="o_li " to="/productionDelivery/shangxiajiajilu">上下架操作记录</router-link>
          <router-link class="o_li act" to="/productionDelivery/yongjinjilu">佣金操作记录</router-link>
          <router-link class="o_li" to="/productionDelivery/fanlijilu">返利操作记录</router-link>
        </div>
				<div class="add flex">
          <el-input v-model.trim="good_name" style="width: 300px;"  placeholder="商品名称"></el-input>
          <el-input v-model.trim="good_sku" style="width: 300px; margin-left: 20px;"  placeholder="商品编码"></el-input>
          <el-button type="danger" style="margin-left: 20px;" @click="search">搜索</el-button>
        </div>
				<div class="con" v-loading="loading">
					<div class="list">
            <div class="th">商品名称</div>
            <div class="th">商品编码</div>
						<div class="th">操作</div>
						<div class="th">时间</div>
						<div class="th">操作人</div>
					</div>
					<div class="list" v-for="item in list" :key="item.id">
            <div class="td">{{item.title}}</div>
            <div class="td">{{item.fetch_code}}</div>
						<div class="td">
              <div slot="content" style="line-height: 25px; text-align: left; padding: 0 10px;">
                <div> 佣金：{{item.rules}} </div>
                <span v-if="item.active_commission != 0">已激活，佣金{{item.active_commission}}元.</span>
                <span v-if="item.first_recharge_one_commission != 0">首充大于{{item.first_recharge_one}}元，佣金{{item.first_recharge_one_commission}}元</span>
                <span v-if="item.first_recharge_two_commission != 0">或者首充大于{{item.first_recharge_two}}元，佣金{{item.first_recharge_two_commission}}元.</span>
                <span v-if="item.recharge_amount_one_commission != 0">累计充值大于{{item.recharge_amount_one}}元，佣金{{item.recharge_amount_one_commission}}元</span>
                <span v-if="item.recharge_amount_two_commission != 0">且累计充值大于{{item.recharge_amount_two}}元，佣金{{item.recharge_amount_two_commission}}元.</span>
              </div>
            </div>
						<div class="td">{{item.created_at}}</div>
						<div class="td">{{item.u_name}}</div>
					</div>
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="添加供应商" :visible.sync="log" width="440px">
			  <div>
				  <el-input v-model="disid" @input="search" placeholder="请输入供应商代码"></el-input>
				  <div class="result">{{result}}</div>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="loggo">确定添加</el-button>
			  </span>
		</el-dialog>
		<!-- <foot></foot> -->
    <notice></notice>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
      "notice": notice
		},
		name: 'mySupplier',
		data(){
			return{
        good_name:"",
        good_sku:"",
        bianma:"",
				msg:"hello",
				loading:true,
				log:false,
				disid:"",
				result:"",
				list:"",
				total:0,
				pagesize:20,
				page:1
			}
		},
		created() {
			this.getlist();
		},
		methods:{
			//翻页
			fanye:function(page){
				this.loading = true
				this.page = page
				this.getlist()
			},
			//跳转
			tiaozhuan:function(id){
				this.$router.push({
					path: '/productionDelivery/productionOther',
					query: { id: id }
				})
			},

			getlist:function(){
				var that = this;
				axios.get('/api/plan-market/commission/page/configs/logs?page='+this.page+'&page_size='+this.pagesize+'&good_name='+encodeURIComponent(this.good_name)+'&good_sku='+this.good_sku)
					.then(response => {
						that.list = response.data.data.logs.data
            that.total = response.data.data.logs.total
						that.loading = false
					})
			},
			//添加供应商先搜索
			search:function(){
        this.page = 1
				this.getlist()
			},
			//点击添加
			loggo:function(){
				var that = this;
				axios.post('/api/plan-market/supplier/add',{secret:this.disid})
					.then(response => {
						if(response.data.msg.code == 0){
							that.loading = true
							that.$message({
								message: '添加成功！',
								type: 'success'
							});
							that.log = false
							that.getlist();
						}else{

						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index{

      .o_ul{
      	background: #F9F9F9; display: flex;
      	.o_li{
      		flex-basis: 160px; line-height: 45px; display: block; color: #727272; border-top: 3px #F9F9F9 solid; font-size: 14px; text-align: center;
      	}
      	.act{ border-top: 3px #DD2727 solid; background: #FFFFFF;}
      }

				flex-basis: 1166px; background: #FFF;
				.title{border-bottom: 1px #EAEAEA solid; line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
				.add{ padding: 20px 30px}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
				}
				.el-pagination{ text-align: right; margin: 20px 0}


		.result{ margin-top: 20px;}
	}
</style>
